<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>社交网站 - 投票中心</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <style>
        :root {
            --primary: #2563eb;
            --primary-light: #eff6ff;
            --primary-dark: #1d4ed8;
            --secondary: #64748b;
            --dark: #1e293b;
            --light: #f8fafc;
            --border: #e2e8f0;
            --success: #10b981;
            --warning: #f59e0b;
            --danger: #ef4444;
        }
        
        body {
            font-family: 'Inter', system-ui, -apple-system, sans-serif;
            background-color: var(--light);
            color: var(--dark);
            line-height: 1.6;
        }
        
        /* 导航栏样式 */
        .navbar {
            background-color: white;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
            padding: 0.75rem 0;
        }
        
        .logo {
            font-size: 1.5rem;
            font-weight: 700;
            color: var(--primary);
            text-decoration: none;
            display: flex;
            align-items: center;
            gap: 0.5rem;
        }
        
        .nav-link {
            color: var(--dark);
            font-weight: 500;
            transition: color 0.2s;
        }
        
        .nav-link:hover, .nav-link.active {
            color: var(--primary);
        }
        
        .user-avatar {
            width: 38px;
            height: 38px;
            border-radius: 50%;
            object-fit: cover;
            border: 2px solid transparent;
            transition: border-color 0.2s;
        }
        
        .user-avatar:hover {
            border-color: var(--primary);
        }
        
        /* 主容器样式 */
        .main-container {
            padding: 2rem 0;
        }
        
        .page-title {
            font-size: 1.8rem;
            font-weight: 700;
            margin-bottom: 1.5rem;
            display: flex;
            align-items: center;
            gap: 0.5rem;
        }
        
        /* 筛选区域样式 */
        .filter-container {
            background-color: white;
            border-radius: 8px;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
            padding: 1.5rem;
            margin-bottom: 1.5rem;
        }
        
        .filter-row {
            display: flex;
            flex-wrap: wrap;
            gap: 1rem;
            margin-bottom: 1rem;
        }
        
        .filter-group {
            flex: 1;
            min-width: 200px;
        }
        
        .filter-label {
            display: block;
            margin-bottom: 0.5rem;
            font-weight: 500;
            color: var(--dark);
        }
        
        .form-select, .form-control {
            border-color: var(--border);
            border-radius: 6px;
            padding: 0.6rem 1rem;
            transition: border-color 0.2s, box-shadow 0.2s;
        }
        
        .form-select:focus, .form-control:focus {
            border-color: var(--primary);
            box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
            outline: none;
        }
        
        .filter-actions {
            display: flex;
            justify-content: flex-end;
            gap: 1rem;
            margin-top: 0.5rem;
        }
        
        .btn {
            display: inline-flex;
            align-items: center;
            gap: 0.5rem;
            padding: 0.6rem 1.25rem;
            border-radius: 6px;
            font-weight: 500;
            cursor: pointer;
            transition: all 0.2s;
            border: none;
        }
        
        .btn-primary {
            background-color: var(--primary);
            color: white;
        }
        
        .btn-primary:hover {
            background-color: var(--primary-dark);
        }
        
        .btn-outline {
            background-color: white;
            color: var(--dark);
            border: 1px solid var(--border);
        }
        
        .btn-outline:hover {
            border-color: var(--primary);
            color: var(--primary);
        }
        
        /* 排序和视图切换 */
        .sort-view-container {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 1.5rem;
        }
        
        .sort-options {
            display: flex;
            align-items: center;
            gap: 1rem;
        }
        
        .sort-label {
            font-weight: 500;
        }
        
        .sort-option {
            color: var(--secondary);
            cursor: pointer;
            transition: color 0.2s;
        }
        
        .sort-option:hover, .sort-option.active {
            color: var(--primary);
        }
        
        .view-options {
            display: flex;
            gap: 0.5rem;
        }
        
        .view-btn {
            width: 36px;
            height: 36px;
            border-radius: 6px;
            border: 1px solid var(--border);
            background-color: white;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            transition: all 0.2s;
        }
        
        .view-btn:hover:not(.active) {
            border-color: var(--primary);
            color: var(--primary);
        }
        
        .view-btn.active {
            background-color: var(--primary);
            color: white;
            border-color: var(--primary);
        }
        
        /* 投票列表样式 */
        .voting-list {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
            gap: 1.5rem;
            margin-bottom: 2rem;
        }
        
        .voting-card {
            background-color: white;
            border-radius: 8px;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
            overflow: hidden;
            transition: transform 0.2s, box-shadow 0.2s;
        }
        
        .voting-card:hover {
            transform: translateY(-4px);
            box-shadow: 0 10px 20px rgba(0, 0, 0, 0.08);
        }
        
        .voting-header {
            padding: 1.25rem;
            border-bottom: 1px solid var(--border);
        }
        
        .voting-title {
            font-size: 1.1rem;
            font-weight: 600;
            margin-bottom: 0.5rem;
            color: var(--dark);
        }
        
        .voting-meta {
            display: flex;
            justify-content: space-between;
            font-size: 0.85rem;
            color: var(--secondary);
        }
        
        .voting-creator {
            display: flex;
            align-items: center;
            gap: 0.5rem;
        }
        
        .voting-avatar {
            width: 24px;
            height: 24px;
            border-radius: 50%;
            object-fit: cover;
        }
        
        /* 投票选项样式 */
        .voting-options {
            padding: 1rem 1.25rem;
        }
        
        .voting-option {
            position: relative;
            padding: 0.75rem;
            border: 1px solid var(--border);
            border-radius: 6px;
            margin-bottom: 0.75rem;
            cursor: pointer;
            transition: all 0.2s;
        }
        
        .voting-option:hover {
            border-color: var(--primary);
            background-color: var(--primary-light);
        }
        
        .voting-option.selected {
            border-color: var(--primary);
            background-color: rgba(37, 99, 235, 0.05);
        }
        
        .option-checkbox {
            position: absolute;
            opacity: 0;
        }
        
        .option-text {
            margin-left: 1.75rem;
            margin-bottom: 0.5rem;
        }
        
        .option-custom-checkbox {
            position: absolute;
            left: 0.75rem;
            top: 50%;
            transform: translateY(-50%);
            width: 18px;
            height: 18px;
            border: 2px solid var(--secondary);
            border-radius: 4px;
            transition: all 0.2s;
        }
        
        .option-checkbox:checked + .option-custom-checkbox {
            background-color: var(--primary);
            border-color: var(--primary);
        }
        
        .option-checkbox:checked + .option-custom-checkbox::after {
            content: '';
            position: absolute;
            left: 5px;
            top: 1px;
            width: 6px;
            height: 12px;
            border: solid white;
            border-width: 0 2px 2px 0;
            transform: rotate(45deg);
        }
        
        /* 投票进度条 */
        .voting-progress {
            height: 8px;
            background-color: var(--border);
            border-radius: 4px;
            overflow: hidden;
            margin-bottom: 0.25rem;
        }
        
        .progress-bar {
            height: 100%;
            background-color: var(--primary);
            border-radius: 4px;
            transition: width 0.5s ease-in-out;
        }
        
        .voting-percentage {
            font-size: 0.8rem;
            color: var(--secondary);
            text-align: right;
        }
        
        /* 投票底部操作 */
        .voting-footer {
            padding: 1rem 1.25rem;
            border-top: 1px solid var(--border);
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        
        .voting-stats {
            font-size: 0.85rem;
            color: var(--secondary);
            display: flex;
            align-items: center;
            gap: 0.5rem;
        }
        
        .vote-btn {
            background-color: var(--primary);
            color: white;
            border: none;
            padding: 0.4rem 1rem;
            border-radius: 6px;
            font-weight: 500;
            cursor: pointer;
            transition: background-color 0.2s;
            display: flex;
            align-items: center;
            gap: 0.5rem;
        }
        
        .vote-btn:hover {
            background-color: var(--primary-dark);
        }
        
        .vote-btn.voted {
            background-color: var(--success);
        }
        
        /* 列表视图样式 */
        .list-view .voting-list {
            display: flex;
            flex-direction: column;
            gap: 1rem;
        }
        
        .list-view .voting-card {
            display: flex;
            flex-direction: column;
        }
        
        .list-view .voting-content {
            display: flex;
            gap: 1.5rem;
        }
        
        .list-view .voting-options {
            flex: 1;
            display: flex;
            gap: 1rem;
            align-items: center;
        }
        
        .list-view .voting-option {
            flex: 1;
            margin-bottom: 0;
        }
        
        /* 分页样式 */
        .pagination-container {
            margin-top: 2rem;
            display: flex;
            justify-content: center;
        }
        
        .pagination {
            display: flex;
            gap: 0.5rem;
        }
        
        .page-btn {
            width: 36px;
            height: 36px;
            border-radius: 6px;
            border: 1px solid var(--border);
            background-color: white;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            transition: all 0.2s;
        }
        
        .page-btn:hover:not(.active):not(.disabled) {
            border-color: var(--primary);
            color: var(--primary);
        }
        
        .page-btn.active {
            background-color: var(--primary);
            color: white;
            border-color: var(--primary);
        }
        
        .page-btn.disabled {
            opacity: 0.5;
            cursor: not-allowed;
        }

        /* 响应式设计 */
        @media (max-width: 768px) {
            .filter-row {
                flex-direction: column;
                gap: 1rem;
            }
            
            .sort-view-container {
                flex-direction: column;
                align-items: flex-start;
                gap: 1rem;
            }
            
            .list-view .voting-content {
                flex-direction: column;
            }
            
            .list-view .voting-options {
                flex-direction: column;
                align-items: stretch;
            }
        }
    </style>
</head>
<body>
    <!-- 导航栏 -->
    <nav class="navbar navbar-expand-lg">
        <div class="container">
            <a href="#" class="logo">
                <i class="fas fa-comments"></i>
                职场社交
            </a>
            
            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
                <span class="navbar-toggler-icon"></span>
            </button>
            
            <div class="collapse navbar-collapse" id="navbarNav">
                <ul class="navbar-nav ms-auto gap-4">
                    <li class="nav-item"><a href="#" class="nav-link">首页</a></li>
                    <li class="nav-item"><a href="#" class="nav-link">专题</a></li>
                    <li class="nav-item"><a href="#" class="nav-link">问答</a></li>
                    <li class="nav-item"><a href="#" class="nav-link">资讯</a></li>
                    <li class="nav-item"><a href="#" class="nav-link">人脉</a></li>
                    <li class="nav-item"><a href="#" class="nav-link active">投票</a></li>
                    <li class="nav-item">
                        <a href="#" class="nav-link" title="个人中心">
                            <img src="https://picsum.photos/100/100?random=1" alt="用户头像" class="user-avatar">
                        </a>
                    </li>
                </ul>
            </div>
        </div>
    </nav>
    
    <div class="container main-container">
        <h1 class="page-title">
            <i class="fas fa-poll-h"></i>
            热门投票
        </h1>
        
        <!-- 筛选区域 -->
        <div class="filter-container">
            <div class="filter-row">
                <div class="filter-group">
                    <label class="filter-label">投票类别</label>
                    <select class="form-select" id="category-filter">
                        <option value="all">全部类别</option>
                        <option value="technology">科技</option>
                        <option value="business">商业</option>
                        <option value="career">职场</option>
                        <option value="product">产品</option>
                        <option value="design">设计</option>
                    </select>
                </div>
                
                <div class="filter-group">
                    <label class="filter-label">投票状态</label>
                    <select class="form-select" id="status-filter">
                        <option value="all">全部状态</option>
                        <option value="active">进行中</option>
                        <option value="closed">已结束</option>
                    </select>
                </div>
                
                <div class="filter-group">
                    <label class="filter-label">参与人数</label>
                    <select class="form-select" id="participants-filter">
                        <option value="all">全部人数</option>
                        <option value="0-100">100人以下</option>
                        <option value="100-500">100-500人</option>
                        <option value="500-1000">500-1000人</option>
                        <option value="1000+">1000人以上</option>
                    </select>
                </div>
                
                <div class="filter-group">
                    <label class="filter-label">创建时间</label>
                    <select class="form-select" id="time-filter">
                        <option value="all">全部时间</option>
                        <option value="today">今天</option>
                        <option value="week">本周</option>
                        <option value="month">本月</option>
                        <option value="quarter">本季度</option>
                    </select>
                </div>
            </div>
            
            <div class="filter-row">
                <div class="filter-group" style="flex: 2;">
                    <label class="filter-label">关键词搜索</label>
                    <div class="input-group">
                        <input type="text" class="form-control" placeholder="搜索投票标题或内容..." id="keyword-search">
                        <button class="btn btn-primary" type="button" id="search-btn">
                            <i class="fas fa-search"></i> 搜索
                        </button>
                    </div>
                </div>
            </div>
            
            <div class="filter-actions">
                <button class="btn btn-outline" id="reset-filter">
                    <i class="fas fa-sync-alt"></i> 重置筛选
                </button>
                <button class="btn btn-primary" id="apply-filter">
                    <i class="fas fa-filter"></i> 应用筛选
                </button>
            </div>
        </div>
        
        <!-- 排序和视图切换 -->
        <div class="sort-view-container">
            <div class="sort-options">
                <span class="sort-label">排序方式:</span>
                <span class="sort-option active" data-sort="popular">热门程度</span>
                <span class="sort-option" data-sort="latest">最新发布</span>
                <span class="sort-option" data-sort="closing">即将结束</span>
                <span class="sort-option" data-sort="participants">参与人数</span>
            </div>
            
            <div class="view-options">
                <button class="view-btn active" data-view="grid" title="网格视图">
                    <i class="fas fa-th"></i>
                </button>
                <button class="view-btn" data-view="list" title="列表视图">
                    <i class="fas fa-list"></i>
                </button>
            </div>
        </div>
        
        <!-- 投票列表 -->
        <div class="voting-list">
            <!-- 投票1 -->
            <div class="voting-card">
                <div class="voting-header">
                    <h3 class="voting-title">你认为未来一年最具发展潜力的技术是什么？</h3>
                    <div class="voting-meta">
                        <div class="voting-creator">
                            <img src="https://picsum.photos/100/100?random=10" alt="李明" class="voting-avatar">
                            <span>李明</span>
                        </div>
                        <div class="voting-time">
                            <i class="far fa-clock"></i> 剩余3天
                        </div>
                    </div>
                </div>
                
                <div class="voting-content">
                    <div class="voting-options">
                        <label class="voting-option">
                            <input type="radio" name="vote-1" class="option-checkbox">
                            <span class="option-custom-checkbox"></span>
                            <div class="option-text">生成式AI</div>
                            <div class="voting-progress">
                                <div class="progress-bar" style="width: 45%;"></div>
                            </div>
                            <div class="voting-percentage">45%</div>
                        </label>
                        
                        <label class="voting-option">
                            <input type="radio" name="vote-1" class="option-checkbox">
                            <span class="option-custom-checkbox"></span>
                            <div class="option-text">云计算</div>
                            <div class="voting-progress">
                                <div class="progress-bar" style="width: 25%;"></div>
                            </div>
                            <div class="voting-percentage">25%</div>
                        </label>
                        
                        <label class="voting-option">
                            <input type="radio" name="vote-1" class="option-checkbox">
                            <span class="option-custom-checkbox"></span>
                            <div class="option-text">区块链</div>
                            <div class="voting-progress">
                                <div class="progress-bar" style="width: 15%;"></div>
                            </div>
                            <div class="voting-percentage">15%</div>
                        </label>
                        
                        <label class="voting-option">
                            <input type="radio" name="vote-1" class="option-checkbox">
                            <span class="option-custom-checkbox"></span>
                            <div class="option-text">元宇宙</div>
                            <div class="voting-progress">
                                <div class="progress-bar" style="width: 15%;"></div>
                            </div>
                            <div class="voting-percentage">15%</div>
                        </label>
                    </div>
                </div>
                
                <div class="voting-footer">
                    <div class="voting-stats">
                        <i class="fas fa-users"></i>
                        <span>2,358 人参与</span>
                    </div>
                    <button class="vote-btn" data-vote-id="1">
                        <i class="fas fa-check"></i> 投票
                    </button>
                </div>
            </div>
            
            <!-- 投票2 -->
            <div class="voting-card">
                <div class="voting-header">
                    <h3 class="voting-title">远程办公和线下办公，你更倾向于哪种模式？</h3>
                    <div class="voting-meta">
                        <div class="voting-creator">
                            <img src="https://picsum.photos/100/100?random=11" alt="张华" class="voting-avatar">
                            <span>张华</span>
                        </div>
                        <div class="voting-time">
                            <i class="far fa-clock"></i> 剩余7天
                        </div>
                    </div>
                </div>
                
                <div class="voting-content">
                    <div class="voting-options">
                        <label class="voting-option">
                            <input type="radio" name="vote-2" class="option-checkbox">
                            <span class="option-custom-checkbox"></span>
                            <div class="option-text">完全远程办公</div>
                            <div class="voting-progress">
                                <div class="progress-bar" style="width: 30%;"></div>
                            </div>
                            <div class="voting-percentage">30%</div>
                        </label>
                        
                        <label class="voting-option">
                            <input type="radio" name="vote-2" class="option-checkbox">
                            <span class="option-custom-checkbox"></span>
                            <div class="option-text">完全线下办公</div>
                            <div class="voting-progress">
                                <div class="progress-bar" style="width: 20%;"></div>
                            </div>
                            <div class="voting-percentage">20%</div>
                        </label>
                        
                        <label class="voting-option">
                            <input type="radio" name="vote-2" class="option-checkbox">
                            <span class="option-custom-checkbox"></span>
                            <div class="option-text">混合办公模式</div>
                            <div class="voting-progress">
                                <div class="progress-bar" style="width: 50%;"></div>
                            </div>
                            <div class="voting-percentage">50%</div>
                        </label>
                    </div>
                </div>
                
                <div class="voting-footer">
                    <div class="voting-stats">
                        <i class="fas fa-users"></i>
                        <span>1,842 人参与</span>
                    </div>
                    <button class="vote-btn" data-vote-id="2">
                        <i class="fas fa-check"></i> 投票
                    </button>
                </div>
            </div>
            
            <!-- 投票3 -->
            <div class="voting-card">
                <div class="voting-header">
                    <h3 class="voting-title">你最常用的项目管理工具是什么？</h3>
                    <div class="voting-meta">
                        <div class="voting-creator">
                            <img src="https://picsum.photos/100/100?random=12" alt="王芳" class="voting-avatar">
                            <span>王芳</span>
                        </div>
                        <div class="voting-time">
                            <i class="far fa-clock"></i> 已结束
                        </div>
                    </div>
                </div>
                
                <div class="voting-content">
                    <div class="voting-options">
                        <label class="voting-option">
                            <input type="radio" name="vote-3" class="option-checkbox" disabled>
                            <span class="option-custom-checkbox"></span>
                            <div class="option-text">Jira</div>
                            <div class="voting-progress">
                                <div class="progress-bar" style="width: 40%;"></div>
                            </div>
                            <div class="voting-percentage">40%</div>
                        </label>
                        
                        <label class="voting-option">
                            <input type="radio" name="vote-3" class="option-checkbox" disabled>
                            <span class="option-custom-checkbox"></span>
                            <div class="option-text">Trello</div>
                            <div class="voting-progress">
                                <div class="progress-bar" style="width: 25%;"></div>
                            </div>
                            <div class="voting-percentage">25%</div>
                        </label>
                        
                        <label class="voting-option">
                            <input type="radio" name="vote-3" class="option-checkbox" disabled>
                            <span class="option-custom-checkbox"></span>
                            <div class="option-text">Asana</div>
                            <div class="voting-progress">
                                <div class="progress-bar" style="width: 15%;"></div>
                            </div>
                            <div class="voting-percentage">15%</div>
                        </label>
                        
                        <label class="voting-option">
                            <input type="radio" name="vote-3" class="option-checkbox" disabled>
                            <span class="option-custom-checkbox"></span>
                            <div class="option-text">飞书/钉钉</div>
                            <div class="voting-progress">
                                <div class="progress-bar" style="width: 20%;"></div>
                            </div>
                            <div class="voting-percentage">20%</div>
                        </label>
                    </div>
                </div>
                
                <div class="voting-footer">
                    <div class="voting-stats">
                        <i class="fas fa-users"></i>
                        <span>3,127 人参与</span>
                    </div>
                    <button class="vote-btn" disabled>
                        <i class="fas fa-lock"></i> 已结束
                    </button>
                </div>
            </div>
            
            <!-- 投票4 -->
            <div class="voting-card">
                <div class="voting-header">
                    <h3 class="voting-title">你认为程序员最应该掌握的编程语言是什么？</h3>
                    <div class="voting-meta">
                        <div class="voting-creator">
                            <img src="https://picsum.photos/100/100?random=13" alt="刘强" class="voting-avatar">
                            <span>刘强</span>
                        </div>
                        <div class="voting-time">
                            <i class="far fa-clock"></i> 剩余10天
                        </div>
                    </div>
                </div>
                
                <div class="voting-content">
                    <div class="voting-options">
                        <label class="voting-option">
                            <input type="radio" name="vote-4" class="option-checkbox">
                            <span class="option-custom-checkbox"></span>
                            <div class="option-text">Python</div>
                            <div class="voting-progress">
                                <div class="progress-bar" style="width: 35%;"></div>
                            </div>
                            <div class="voting-percentage">35%</div>
                        </label>
                        
                        <label class="voting-option">
                            <input type="radio" name="vote-4" class="option-checkbox">
                            <span class="option-custom-checkbox"></span>
                            <div class="option-text">JavaScript</div>
                            <div class="voting-progress">
                                <div class="progress-bar" style="width: 30%;"></div>
                            </div>
                            <div class="voting-percentage">30%</div>
                        </label>
                        
                        <label class="voting-option">
                            <input type="radio" name="vote-4" class="option-checkbox">
                            <span class="option-custom-checkbox"></span>
                            <div class="option-text">Java</div>
                            <div class="voting-progress">
                                <div class="progress-bar" style="width: 20%;"></div>
                            </div>
                            <div class="voting-percentage">20%</div>
                        </label>
                        
                        <label class="voting-option">
                            <input type="radio" name="vote-4" class="option-checkbox">
                            <span class="option-custom-checkbox"></span>
                            <div class="option-text">Go</div>
                            <div class="voting-progress">
                                <div class="progress-bar" style="width: 15%;"></div>
                            </div>
                            <div class="voting-percentage">15%</div>
                        </label>
                    </div>
                </div>
                
                <div class="voting-footer">
                    <div class="voting-stats">
                        <i class="fas fa-users"></i>
                        <span>4,582 人参与</span>
                    </div>
                    <button class="vote-btn" data-vote-id="4">
                        <i class="fas fa-check"></i> 投票
                    </button>
                </div>
            </div>
            
            <!-- 投票5 -->
            <div class="voting-card">
                <div class="voting-header">
                    <h3 class="voting-title">你每天花在社交媒体上的时间大约是？</h3>
                    <div class="voting-meta">
                        <div class="voting-creator">
                            <img src="https://picsum.photos/100/100?random=14" alt="赵敏" class="voting-avatar">
                            <span>赵敏</span>
                        </div>
                        <div class="voting-time">
                            <i class="far fa-clock"></i> 剩余5天
                        </div>
                    </div>
                </div>
                
                <div class="voting-content">
                    <div class="voting-options">
                        <label class="voting-option">
                            <input type="radio" name="vote-5" class="option-checkbox">
                            <span class="option-custom-checkbox"></span>
                            <div class="option-text">1小时以内</div>
                            <div class="voting-progress">
                                <div class="progress-bar" style="width: 15%;"></div>
                            </div>
                            <div class="voting-percentage">15%</div>
                        </label>
                        
                        <label class="voting-option">
                            <input type="radio" name="vote-5" class="option-checkbox">
                            <span class="option-custom-checkbox"></span>
                            <div class="option-text">1-2小时</div>
                            <div class="voting-progress">
                                <div class="progress-bar" style="width: 30%;"></div>
                            </div>
                            <div class="voting-percentage">30%</div>
                        </label>
                        
                        <label class="voting-option">
                            <input type="radio" name="vote-5" class="option-checkbox">
                            <span class="option-custom-checkbox"></span>
                            <div class="option-text">2-4小时</div>
                            <div class="voting-progress">
                                <div class="progress-bar" style="width: 40%;"></div>
                            </div>
                            <div class="voting-percentage">40%</div>
                        </label>
                        
                        <label class="voting-option">
                            <input type="radio" name="vote-5" class="option-checkbox">
                            <span class="option-custom-checkbox"></span>
                            <div class="option-text">4小时以上</div>
                            <div class="voting-progress">
                                <div class="progress-bar" style="width: 15%;"></div>
                            </div>
                            <div class="voting-percentage">15%</div>
                        </label>
                    </div>
                </div>
                
                <div class="voting-footer">
                    <div class="voting-stats">
                        <i class="fas fa-users"></i>
                        <span>5,214 人参与</span>
                    </div>
                    <button class="vote-btn" data-vote-id="5">
                        <i class="fas fa-check"></i> 投票
                    </button>
                </div>
            </div>
            
            <!-- 投票6 -->
            <div class="voting-card">
                <div class="voting-header">
                    <h3 class="voting-title">你认为2024年最值得关注的科技产品是？</h3>
                    <div class="voting-meta">
                        <div class="voting-creator">
                            <img src="https://picsum.photos/100/100?random=15" alt="陈明" class="voting-avatar">
                            <span>陈明</span>
                        </div>
                        <div class="voting-time">
                            <i class="far fa-clock"></i> 剩余12天
                        </div>
                    </div>
                </div>
                
                <div class="voting-content">
                    <div class="voting-options">
                        <label class="voting-option">
                            <input type="radio" name="vote-6" class="option-checkbox">
                            <span class="option-custom-checkbox"></span>
                            <div class="option-text">AI手机</div>
                            <div class="voting-progress">
                                <div class="progress-bar" style="width: 35%;"></div>
                            </div>
                            <div class="voting-percentage">35%</div>
                        </label>
                        
                        <label class="voting-option">
                            <input type="radio" name="vote-6" class="option-checkbox">
                            <span class="option-custom-checkbox"></span>
                            <div class="option-text">智能眼镜</div>
                            <div class="voting-progress">
                                <div class="progress-bar" style="width: 25%;"></div>
                            </div>
                            <div class="voting-percentage">25%</div>
                        </label>
                        
                        <label class="voting-option">
                            <input type="radio" name="vote-6" class="option-checkbox">
                            <span class="option-custom-checkbox"></span>
                            <div class="option-text">折叠屏电脑</div>
                            <div class="voting-progress">
                                <div class="progress-bar" style="width: 20%;"></div>
                            </div>
                            <div class="voting-percentage">20%</div>
                        </label>
                        
                        <label class="voting-option">
                            <input type="radio" name="vote-6" class="option-checkbox">
                            <span class="option-custom-checkbox"></span>
                            <div class="option-text">家庭机器人</div>
                            <div class="voting-progress">
                                <div class="progress-bar" style="width: 20%;"></div>
                            </div>
                            <div class="voting-percentage">20%</div>
                        </label>
                    </div>
                </div>
                
                <div class="voting-footer">
                    <div class="voting-stats">
                        <i class="fas fa-users"></i>
                        <span>1,987 人参与</span>
                    </div>
                    <button class="vote-btn" data-vote-id="6">
                        <i class="fas fa-check"></i> 投票
                    </button>
                </div>
            </div>
        </div>
        
        <!-- 分页 -->
        <div class="pagination-container">
            <div class="pagination">
                <button class="page-btn disabled">
                    <i class="fas fa-chevron-left"></i>
                </button>
                <button class="page-btn active">1</button>
                <button class="page-btn">2</button>
                <button class="page-btn">3</button>
                <button class="page-btn">4</button>
                <button class="page-btn">5</button>
                <button class="page-btn">
                    <i class="fas fa-chevron-right"></i>
                </button>
            </div>
        </div>
    </div>
    
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
    <script>
        // 筛选功能
        document.getElementById('apply-filter').addEventListener('click', function() {
            const category = document.getElementById('category-filter').value;
            const status = document.getElementById('status-filter').value;
            const participants = document.getElementById('participants-filter').value;
            const time = document.getElementById('time-filter').value;
            const keyword = document.getElementById('keyword-search').value;
            
            // 在实际应用中，这里会根据筛选条件发送请求获取数据
            showToast(`已应用筛选: 类别=${category}, 状态=${status}, 参与人数=${participants}`);
        });
        
        // 重置筛选
        document.getElementById('reset-filter').addEventListener('click', function() {
            document.getElementById('category-filter').value = 'all';
            document.getElementById('status-filter').value = 'all';
            document.getElementById('participants-filter').value = 'all';
            document.getElementById('time-filter').value = 'all';
            document.getElementById('keyword-search').value = '';
            
            showToast('已重置所有筛选条件');
        });
        
        // 搜索功能
        document.getElementById('search-btn').addEventListener('click', function() {
            const keyword = document.getElementById('keyword-search').value;
            if (keyword.trim()) {
                showToast(`搜索关键词: ${keyword}`);
            } else {
                showToast('请输入搜索关键词');
            }
        });
        
        // 排序功能
        document.querySelectorAll('.sort-option').forEach(option => {
            option.addEventListener('click', function() {
                document.querySelectorAll('.sort-option').forEach(opt => opt.classList.remove('active'));
                this.classList.add('active');
                const sortType = this.getAttribute('data-sort');
                
                // 在实际应用中，这里会根据排序类型重新排序数据
                showToast(`已按 ${this.textContent} 排序`);
            });
        });
        
        // 视图切换
        document.querySelectorAll('.view-btn').forEach(btn => {
            btn.addEventListener('click', function() {
                document.querySelectorAll('.view-btn').forEach(b => b.classList.remove('active'));
                this.classList.add('active');
                const viewType = this.getAttribute('data-view');
                
                if (viewType === 'list') {
                    document.body.classList.add('list-view');
                } else {
                    document.body.classList.remove('list-view');
                }
            });
        });
        
        // 投票功能
        document.querySelectorAll('.vote-btn[data-vote-id]').forEach(btn => {
            btn.addEventListener('click', function() {
                const voteId = this.getAttribute('data-vote-id');
                const selectedOption = document.querySelector(`input[name="vote-${voteId}"]:checked`);
                
                if (!selectedOption) {
                    showToast('请先选择一个选项');
                    return;
                }
                
                if (this.classList.contains('voted')) {
                    this.classList.remove('voted');
                    this.innerHTML = '<i class="fas fa-check"></i> 投票';
                    showToast('已取消投票');
                    
                    // 在实际应用中，这里会发送取消投票的请求
                } else {
                    this.classList.add('voted');
                    this.innerHTML = '<i class="fas fa-check"></i> 已投票';
                    showToast('投票成功');
                    
                    // 在实际应用中，这里会发送投票请求并更新进度
                    const option = selectedOption.closest('.voting-option');
                    const progressBar = option.querySelector('.progress-bar');
                    const percentageEl = option.querySelector('.voting-percentage');
                    
                    let currentPercentage = parseInt(percentageEl.textContent);
                    currentPercentage += 1;
                    progressBar.style.width = `${currentPercentage}%`;
                    percentageEl.textContent = `${currentPercentage}%`;
                }
            });
        });
        
        // 投票选项选中效果
        document.querySelectorAll('.voting-option').forEach(option => {
            const checkbox = option.querySelector('.option-checkbox');
            
            if (checkbox && !checkbox.disabled) {
                option.addEventListener('click', function() {
                    checkbox.checked = true;
                    
                    // 移除同组其他选项的选中状态
                    const name = checkbox.getAttribute('name');
                    document.querySelectorAll(`input[name="${name}"]`).forEach(input => {
                        if (input !== checkbox) {
                            input.closest('.voting-option').classList.remove('selected');
                        }
                    });
                    
                    // 添加当前选项的选中状态
                    this.classList.add('selected');
                });
            }
        });
        
        // 分页功能
        document.querySelectorAll('.page-btn:not(.disabled)').forEach(btn => {
            btn.addEventListener('click', function() {
                document.querySelectorAll('.page-btn').forEach(b => b.classList.remove('active'));
                this.classList.add('active');
                showToast(`已切换到第 ${this.textContent || '1'} 页`);
                // 在实际应用中，这里会加载对应页的数据
            });
        });
        

    </script>
</body>
</html>

